import 'package:flutter/material.dart';

class MyApp12 extends StatelessWidget {
  MyApp12({super.key});

  final Map goods = {
    "createTime": "2024-08-15 21:49:48",
    "orderState": '待发货',
    "image":
        "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
    "name": "茶水分离杯耐热隔热玻璃杯 茶水分离杯耐热隔热玻璃杯",
    "totalNum": 2,
    "curPrice": 119.5,
    "totalMoney": 119.5,
    "attrsText": "规格:白色240ml",
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //导航条
      appBar: AppBar(
        title: const Text(
          '商品订单信息',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
        backgroundColor: Colors.pink,
        centerTitle: true,
      ),
      //主体区域
      body: Container(
        //
        padding: EdgeInsets.all(10),
        width: MediaQuery.of(context).size.width,
        height: 250,
        color: Colors.white,
        child: Column(
          children: [
            //1.上部分
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                //
                Text('${goods['createTime']}'),
                Text(
                  //
                  '${goods['orderState']}',
                  style: TextStyle(color: Colors.orange),
                ),
              ],
            ),
            //2.中间部分
            Padding(
              padding: EdgeInsets.only(top: 10, bottom: 10),
              child: Row(
                //设置侧轴居上
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  //2.1 图片
                  Image.network(goods['image'], width: 120, height: 120),
                  //2.2 右侧
                  Expanded(
                    flex: 1, //自动占满剩余
                    child: Padding(
                      padding: EdgeInsets.only(left: 10),
                      child: Column(
                        //设置主轴对齐方式 （茶水分离杯耐热隔热玻璃杯 茶水分离杯耐热隔热玻璃杯）  居上不生效 改到上面的row去设置侧轴
                        // mainAxisAlignment: MainAxisAlignment.start,

                        //设置侧轴居左对齐
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          //2.2.1 右侧第一行
                          Row(
                            children: [
                              Expanded(child: Text('${goods['name']}')),
                              SizedBox(width: 10),
                              Text('X${goods['totalNum']}'),
                            ],
                          ),
                          //用SizedBox设置间距
                          SizedBox(height: 10),
                          //2.2.2 第二行
                          Container(
                            //
                            padding: EdgeInsets.all(5),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(5),
                              color: const Color.fromARGB(255, 243, 241, 241),
                            ),
                            child: Text(
                              '${goods['attrsText']}',
                              style: TextStyle(color: Colors.grey),
                            ),
                          ),
                          //第三行
                          SizedBox(height: 10),
                          Text(
                            '￥${goods['curPrice']}',
                            style: TextStyle(color: Colors.red),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            //3.下部分
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                //
                Text('合计：￥${goods['totalNum'] * goods['curPrice']}'),
              ],
            ),
            SizedBox(height: 10),
            //4.按钮
            Row(
              //
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                // Expanded(
                //   child: ElevatedButton(onPressed: () {}, child: Text('取消订单')),
                // ),
                // SizedBox(width: 10),
                // Expanded(
                //   child: ElevatedButton(onPressed: () {}, child: Text('立即付款')),
                // ),
                ElevatedButton(onPressed: () {}, child: Text('取消订单')),
                SizedBox(width: 10),
                ElevatedButton(onPressed: () {}, child: Text('立即付款')),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
